<template>
	<view class="greyBox padTop_20">
		<view class="form">
			<u-form :model="form" ref="uForm" label-width="200">
				<u-form-item label="借款银行" prop="bank" required><u-input required v-model="bankName" disabled="true"
						type="select" @click="bankModelShow = true" placeholder="请选择银行" /></u-form-item>
				<view class="grey"></view>
				<u-form-item label="车辆信息" required><u-input required v-model="form.carInfo" disabled="true"
						type="select" @click="carModelShow = true" placeholder="添加车辆信息" /></u-form-item>
				<view class="carInfo" v-for="(item,index) in form.carList" :key="index">
					<view class="content">
						<view class="name">{{item.carInfo}}</view>
						<view class="remove" @click="removeCar(index)">
							<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_delete_supplier@2x.png"
								size="32"></u-icon>
						</view>
					</view>
					<view class="priceBlock">
						¥<u-input v-model="item.price" :custom-style="priceStyle" :clearable="false"
							placeholder="请输入车辆单价" :border="false" @blur="onBlur()" />
					</view>
					<view class="sortTitle">
						车架号：
						<view class="icon" @click="addVin(index)">添加车架号</view>
					</view>
					<view class="priceBlock vinsBlock" v-for="(vin,i) in item.vinList" :key="i">
						<u-input :custom-style="text" v-model="item.vinList[i]" :clearable="false" placeholder="请输入车架号"
							:border="false" />
						<view class="icon">
							<u-icon name="minus-square-fill" @click="removeVin(index,i)" color="red" size="40"></u-icon>
						</view>
					</view>
				</view>
				<view class="totalPrice" v-if="form.carList.length > 0">
					<view class="carNum">已添加{{totalSize}}台</view>
					<view class="price">
						<view class="">合计：</view>
						<view class="priceNum">{{totalPrice}}</view>
					</view>
				</view>
				<view class="grey"></view>
				<u-form-item label="选择仓库" prop="warehouse" required>
					<u-input required v-model="warehouse" disabled="true" @click="warehouseShow = true"
						placeholder="请选择仓库" />
					<view class="subinfo">
						{{warehouseAddress}}
					</view>
				</u-form-item>
				<u-form-item label="联系方式" required v-if="warehouse != ''">
					<u-input required v-model="mobile" disabled="true" placeholder="" />
				</u-form-item>
			</u-form>

		</view>
		<view class="actions">
			<u-button type="success" shape="circle" :custom-style="buttonStyle" @click="submit"
				:disabled="isDisabled">确认提交</u-button>
		</view>
		<u-select v-model="bankModelShow" @confirm="confirmBank" :list="bankList"></u-select>
		<u-select v-model="carModelShow" @confirm="confirmCar" mode="mutil-column-auto" :list="carModelList"></u-select>
		<u-popup v-model="warehouseShow" mode="left" width="85%">
			<warehouse ref="warehouse" :list="warehouseList" @onChange="warehouseChange"></warehouse>
		</u-popup>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		getCarModels
	} from "@/utils/car.js";
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js"
	import warehouse from '@/components/warehouse.vue';
	export default {
		components: {
			warehouse
		},
		data() {
			return {
				buttonStyle,
				warehouseList: [],
				bankList: [],
				bankModelShow: false,
				carModelShow: false,
				warehouseShow: false,
				carModelList: [],
				priceStyle: {
					height: "36rpx!important",
					minHeight: "auto",
					fontSize: "26rpx!important",
					marginLeft: "24rpx",
					width: "626rpx"
				},
				bankName: "",
				form: {
					bankId: "",
					storeId: "",
					carList: []
				},
				totalPrice: 0,
				totalSize: 0,
				warehouseAddress: "",
				mobile: "",
				warehouse: ""
			}
		},
		onLoad() {

		},
		onReady() {

		},
		onShow() {
			this.getCarList();
			this.getBankList();
			this.getWarehouseList();
		},
		methods: {
			submit() {
				let that = this;
				if (that.vaild()) {
					let params = that.form;
					that.$api.addSalesApply(params).then(res => {
						uni.showToast({
							title: '提交成功',
							icon: "success",
							duration: 2000,
							success: () => {
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}
						})
					})
				}
			},
			vaild() {
				let that = this
				if (that.form.bankId == "") {
					uni.showToast({
						title: '请选择借款银行',
						icon: "none",
						duration: 2000,
					})
					return false;
				}
				if (that.form.storeId == "") {
					uni.showToast({
						title: '请选择仓库',
						icon: "none",
						duration: 2000,
					})
					return false;
				}
				if (that.form.carList.length == 0) {
					uni.showToast({
						title: '请添加车辆信息',
						icon: "none",
						duration: 2000,
					})
					return false;
				}
				let priceErr = 0;
				let vinErr = 0;
				that.form.carList.forEach(item => {
					if (item.price == "") {
						priceErr++;
					}
					item.vinList.forEach(vin => {
						if (vin == "") {
							vinErr++
						}
					})
				})
				if (priceErr > 0) {
					uni.showToast({
						title: '请完整填写汽车价格信息',
						icon: "none",
						duration: 2000,
					})
					return false;
				}
				if (vinErr > 0) {
					uni.showToast({
						title: '请完整填写车架号信息',
						icon: "none",
						duration: 2000,
					})
					return false;
				}
				return true;
			},
			warehouseChange(item) {
				this.warehouse = item.name;
				this.mobile = item.contactPhone;
				this.form.storeId = item.id;
				this.warehouseAddress = item.addressCountry + "-" + item.addressCity + "-" + item.addressDetails;
				this.warehouseShow = false;
			},
			getWarehouseList() {
				let that = this;
				that.$api.getSalesWarehouseList().then(res => {
					that.warehouseList = res.result;
				})
			},
			addVin(index) {
				this.form.carList[index].vinList.push("");
				this.onBlur();
				this.onSizeChange();
			},
			removeCar(index) {
				this.form.carList.splice(index, 1);
				this.onBlur();
				this.onSizeChange();
			},
			removeVin(index, i) {
				this.form.carList[index].vinList.splice(i, 1);
				this.onBlur();
				this.onSizeChange();
			},
			onSizeChange() {
				let that = this;
				that.totalSize = 0;
				that.form.carList.forEach(item => {
					let modelSize = 0; //该款式所有车辆总价，单价*车架号数量
					modelSize = item.vinList.length
					that.totalSize = parseInt(that.totalSize) + parseInt(modelSize);
				})
			},
			onBlur() {
				let that = this;
				that.totalPrice = 0;
				that.form.carList.forEach(item => {
					let modelPrice = 0; //该款式所有车辆总价，单价*车架号数量
					let price = parseInt(item.price) || 0;
					modelPrice = item.vinList.length * price;
					that.totalPrice = parseInt(that.totalPrice) + parseInt(modelPrice);
				})

			},
			confirmCar(e) {
				let that = this;
				that.form.carList.push({
					carInfo: e[0].label + "-" + e[1].label + "" + e[2].label,
					carId: e[2].value,
					price: "",
					vinList: [""]
				});
				this.onSizeChange();
			},
			confirmBank(e) {
				this.form.bankId = e[0].value;
				this.bankName = e[0].label;
			},
			getBankList() {
				let that = this;
				let params = {
					current: 1,
					size: 99
				}
				that.$api.getSalesBankList(params).then(res => {
					res.result.forEach((item) => {
						that.bankList.push({
							value: item.bankId,
							label: item.bank
						})
					})
				})
			},
			getCarList() {
				let that = this;
				that.$api.getCarList().then(res => {
					that.carModelList = getCarModels(res.result)
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.form {
		margin-bottom: 20rpx;

		.subinfo {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #878787;
			line-height: 34rpx;
		}

		/deep/.u-form-item {
			padding-left: 30rpx;
			padding-right: 30rpx;
			background: #FFF;
			font-size: 34rpx;
		}

		/deep/.u-form-item--left__content {
			padding-left: 10rpx;
		}

		.carInfo {
			padding: 30rpx;
			position: relative;

			&::after {
				position: absolute;
				height: 2rpx;
				background: #F2F2F2;
				bottom: 0;
				left: 30rpx;
				content: "";
				width: 100%;
			}

			&:last-child::after {
				display: none;
			}

			.content {
				display: flex;
				margin-bottom: 30rpx;
				line-height: 49rpx;

				.infoBlock {
					margin-left: auto;

					/deep/.u-icon-minus,
					/deep/ .u-icon-plus {
						border-radius: 300rpx;
						width: 40rpx !important;
						height: 40rpx !important;
					}

					/deep/input {
						background: none !important;
						width: 60rpx !important;
					}

				}

				.remove {
					margin-left: auto;
					margin-top: 8rpx;
				}
			}

			.sortTitle {
				padding-left: 0;
				line-height: 46rpx;
				margin-top: 20rpx;
				display: flex;
				margin-bottom: 10rpx;
				font-size: 26rpx;
				color: #969696;

				.icon {
					margin-left: auto;
				}
			}

			.priceBlock {
				display: flex;
				width: 690rpx;
				height: 68rpx;
				margin: 0 auto;
				background: #F7F7F7;
				border-radius: 6rpx;
				padding: 16rpx 20rpx;

				&.vinsBlock {
					margin-bottom: 20rpx;

					/deep/u-input {
						width: 100%;
					}

					/deep/input {
						min-height: 36rpx !important;
						font-size: 26rpx !important;
						margin-left: 24rpx;
						width: 100%;
					}
				}
			}

			background: #FFF;
		}

		.totalPrice {
			display: flex;
			height: 100rpx;
			justify-content: flex-end;
			line-height: 100rpx;
			background: #FFF;
			padding: 0 30rpx;

			.carNum {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #878787;
				margin-right: 20rpx;
			}

			.price {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #202020;
				display: flex;

				.priceNum {
					font-size: 36rpx;
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					color: #F76260;
				}
			}
		}
	}

	.actions {
		width: 670rpx;
		margin: 60rpx auto;
	}
</style>